<template>
  <query-layout
    :breadcrumbs="breadcrumbs"
    :tabs="tabs"
    :actionBtns="btns"
    :paging="paging"
    @refresh="refresh"
    @pageSizeChange="onShowSizeChange"
    @pageChange="pageChange"
    @click="() => {}"
    @tabChange="() => {}"
  >
    <template slot="form">
      <a-form-model
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        layout="inline"
      >
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="Activity name">
              <a-input v-model="form.name" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="Activity name">
              <a-input v-model="form.name" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="Activity name">
              <a-input v-model="form.name" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="Activity name">
              <a-input v-model="form.name" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="Activity name">
              <a-input v-model="form.name" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-button type="primary" @click="() => {}" v-preventReClick>
              <a-icon type="search" />查询
            </a-button>
            <a-button @click="() => {}">
              <a-icon type="reload" />重置
            </a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </template>
    <template slot="table">
      <a-table
        :columns="columns"
        :dataSource="protocolData"
        :pagination="false"
        rowKey="id"
      >
      </a-table>
    </template>
  </query-layout>
</template>

<script>
import formMixin from '@/mixins/form-mixin.js'
import pageMixin from '@/mixins/page-mixin.js'
export default {
  mixins: [formMixin, pageMixin],
  data () {
    return {
      breadcrumbs: ['首页', '测试表单'],
      btns: [
        { key: 'key1', name: 'key1' },
        { key: 'key3', name: 'key3' }
      ],
      tabs: [
        { key: 1, name: 'name1' },
        { key: 2, name: 'dd' },
        { key: 3, name: 'name3' }
      ],
      form: {},
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 60,
          customRender: (value, row, index) => `${index + 1}`
        },
        {
          title: '协议名称',
          dataIndex: 'name',
          align: 'center',
          width: 130
        },
        // {
        //   title: "协议编号",
        //   dataIndex: "code",
        //   ellipsis: true,
        // },
        {
          title: '供应商',
          align: 'center',
          dataIndex: 'supplierName',
          width: 130
        },
        {
          title: '创建单位',
          align: 'center',
          width: 130,
          dataIndex: 'deptName'
        },
        {
          title: '供货类型',
          align: 'center',
          dataIndex: 'supplyType',
          width: 100
        },
        {
          title: '协议结束时间',
          align: 'center',
          dataIndex: 'endTime',
          width: 100,
          class: 'date-td'
          //   ellipsis: true
        },
        {
          title: '协议来源',
          align: 'center',
          dataIndex: 'protocolSource',
          width: '90px'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          width: '90px'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          align: 'center',
          ellipsis: true,
          width: 120
        }
      ],
      protocolData: []
    }
  },
  methods: {
    onShowSizeChange (current, size) {
      console.log('onShowSizeChange', current, size)
    },
    pageChange (page, pageSize) {
      this.paging.current = page
      console.log('pageChange', page, pageSize)
    },
    refresh (current, pageSize) {
      console.log('refresh', current, pageSize)
    },
    tabChange (key) {
      console.log(key)
    },
    btnClick (key) {
      console.log(key)
    }
  }
}
</script>

<style></style>
